<template>
  <div class="page-commu">
    <!-- 左侧文章内容 -->
    <div class="article-menus">
      <div class="func-bnt">
        <!-- 导航 -->
        <ul class="nav-list">
          <li class="nav-item"
              v-for="item in navList"
              :class="{'is-active':item.type==isActive}"
              :key="item.type"
              @click="changeType(item.type)">{{item.text}}</li>
        </ul>
        <div class="article-list">
          <commu-item :artiList="artiList" />
        </div>
      </div>
    </div>
    <!-- 右侧其他 -->
    <div class="other-point">
      <Calendars />
    </div>
  </div>
</template>

<script>
import Calendars from '@/components/Calendars.vue' // 日历组件
import CommuItem from '@/components/CommuItem.vue'
import { getCommuList } from '@/api/article'
export default {
  components: {
    Calendars,
    CommuItem
  },

  data() {
    return {
      isActive: 0, // tab选中状态
      typeActive: 0,
      navList: [
        { type: 0, text: '推荐' },
        { type: 1, text: '最新' },
        { type: 2, text: '最热' }
      ],
      // 文章列表数据
      artiList: [
        
      ]
    }
  },
  methods: {
    // 切换类型
    changeType(type) {
      this.isActive = type
      this.typeActive = type
      console.log(type)
      this.initArticleList()
    },
    /* 初始化文章推荐列表 */
    async initArticleList() {
      let { data: res } = await getCommuList(this.typeActive)
      console.log(res.data)
      this.artiList = res.data
    }
  },
  created() {
    this.initArticleList()
  }
}
</script>

<style lang="less" scoped>
.page-commu {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 40px auto;
  width: 1060px;
  min-height: 300px;
  /* 左侧文章列表 */
  .article-menus {
    width: 70%;
    min-height: 300px;
    /* 导航 */
    .nav-list {
      display: flex;
      margin-top: 20px;
      padding: 10px 0;
      border-bottom: 1px solid #efefef;
      .is-active {
        color: #33c5c5;
      }
      .nav-item {
        position: relative;
        padding: 0 14px;
        font-family: '黑体';
        cursor: pointer;
        &::after {
          position: absolute;
          top: 3px;
          right: 0;
          content: '';
          width: 1px;
          height: 16px;
          background-color: #ccc;
        }
      }
    }
  }

  /* 右侧其他 */
  .other-point {
    width: 24%;
  }
}
</style>